<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Article Detail</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f7fc;
            margin: 0;
            padding: 0;
        }

        .article-container {
            max-width: 800px;
            margin: 20px auto;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .article-title {
            font-size: 2rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .article-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            color: #888;
        }

        .article-meta span {
            font-size: 0.9rem;
        }

        .article-content {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #333;
            margin-bottom: 20px;
        }

        .article-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .like-button {
            background-color: #409eff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
        }

        .like-button:hover {
            background-color: #66b1ff;
        }

        .time {
            font-size: 0.9rem;
            color: #aaa;
        }

        .author {
            font-weight: bold;
            color: #333;
        }
    </style>
</head>

<body>

<div id="app" class="article-container">
    <!-- 文章内容 -->
    <div class="article-title">
        {{ article.title }}
    </div>
    <div class="article-meta">
        <span class="author">{{ article.author }}</span>
        <span class="time">{{ formatDate(article.publishedAt) }}</span>
    </div>

    <div class="article-content">
        {{ article.content }}
    </div>

    <div class="article-footer">
        <div>
            <span>点赞数: {{ article.likes }}</span>
        </div>
        <div>
            <button class="like-button" @click="likeArticle">点赞</button>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.26/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-plus/dist/index.full.js"></script>
<script>
    const { createApp } = Vue;

    createApp({
        data() {
            return {
                article: {
                    title: "新中式养生：传统智慧与现代生活的融合",
                    content: "药食同源是指某些食物既可以作为食材，也可以作为药材，具有防病治病、强身健体的作用。在中医理论中，药食同源的中草药被广泛应用，既可以用于日常养生保健，也可以辅助治疗一些常见疾病。\n" +
                        "以下是一些常见的药食同源中草药及其功效：\n" +
                        "红枣：红枣是常用的药食同源食材，具有补中益气、养血安神的功效。它含有丰富的维生素和矿物质，能够增强免疫力，改善睡眠质量。红枣可用于煲汤、煮粥或直接食用，适合体质虚弱、贫血、失眠的人群。\n" +
                        "枸杞：枸杞具有滋补肝肾、明目强身的功效。它含有丰富的枸杞多糖、维生素和矿物质，具有抗氧化、抗疲劳、增强免疫力的作用。枸杞可泡茶饮用，也可用于煲汤、煮粥，适合肝肾阴虚、视力模糊、免疫力低下的人群。\n" +
                        "山楂：山楂具有消食健胃、活血化瘀的功效。它含有丰富的有机酸成分，能够促进消化，改善食欲不振、消化不良等问题。山楂可直接食用，也可用于制作山楂糕、山楂酱等，适合消化不良、食欲不振、高血脂的人群。\n" +
                        "陈皮：陈皮具有理气健脾、燥湿化痰的功效。它含有挥发油成分，能够促进胃肠蠕动，缓解胃胀、胃痛等问题。陈皮可用于泡茶、煲汤或煮粥，适合脾胃虚弱、湿气重、咳嗽痰多的人群。\n" +
                        "薏米：薏米具有利水渗湿、清热排毒的功效。它含有丰富的薏苡仁酯成分，具有抗癌、抗氧化的作用。薏米可煮粥食用，也可用于制作薏米茶，适合湿气重、水肿、皮肤粗糙的人群。\n" +
                        "百合：百合具有润肺止咳、清心安神的功效。它含有生物碱成分，能够润肺止咳，缓解干咳、失眠等问题。百合可用于煲汤、煮粥或制作百合干，适合阴虚肺燥、失眠多梦的人群。\n" +
                        "莲子：莲子具有补脾止泻、益肾固精、养心安神的功效。它含有丰富的蛋白质和矿物质，能够改善睡眠质量，缓解心悸、失眠等问题。莲子可用于煲汤、煮粥或制作莲子心茶，适合失眠多梦、心悸、脾虚泄泻的人群。\n" +
                        "现代研究表明，药食同源中草药含有多种生物活性成分，对人体健康有益。例如，红枣中的多糖成分可增强免疫力，枸杞中的枸杞多糖具有抗氧化作用，山楂中的有机酸成分可促进消化，陈皮中的挥发油成分可理气健脾。这些中草药通过合理的搭配和食用，不仅可以满足人们对美味的追求，还能为健康提供保障。",
                    author: "章初初",
                    likes: 21,
                    publishedAt: "2025-03-17 13:39:44"
                }
            }
        },
        computed: {
            formattedContent() {
                // 替换换行符为 <br>，并替换空格为 &nbsp;
                return this.content.replace(/\n/g, "<br>").replace(/^  /, "&nbsp;&nbsp;");
            }
        },
        methods: {
            formatDate(dateStr) {
                const date = new Date(dateStr);
                return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
            },
            likeArticle() {
                this.article.likes++;
            }
        }
    }).mount("#app");
</script>

</body>

</html>
